<script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'

import { timeFormat_2 } from '@/hooks/util'
import * as workPlaceWeChatApi from '@/api/workPlaceWeChat'

import weChatUserImg from '@/assets/weChatUser.webp'

const open = ref<boolean>(false)

const showModal = () => {
  open.value = true

  // 刷新二维码
  refresh()
}

const handleOk = (e: MouseEvent) => {
  open.value = false
}

defineExpose({
  showModal,
})

const dataSource = ref([])
const columns = [
  {
    title: '头像',
    key: 'avatar',
    width: 100,
  },
  {
    title: '昵称',
    key: 'nickName',
    width: 200,
  },
  {
    title: '绑定时间',
    key: 'relevancyTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'action',
    width: 100,
    fixed: 'right',
  },
]
let loading = ref<boolean>(false)

interface Pagination {
  page: number
  pageSize: number
  total: number
  current?: number
  onChange: Function
  showSizeChanger: boolean
  showQuickJumper: boolean
}
const handlePageChange = (page: any, pageSize: any) => {
  pagination.value.pageSize = pageSize
  searchParams.value.pageSize = pageSize
}
const pagination = ref<Pagination>({
  page: 1,
  pageSize: 10,
  total: 0,
  onChange: handlePageChange,
  showSizeChanger: true,
  showQuickJumper: true,
})

interface SearchParams {
  currentPage: number
  pageSize: number
}
const searchParams = ref<SearchParams>({
  currentPage: pagination.value.page,
  pageSize: pagination.value.pageSize,
})

const changePage = (e: any) => {
  console.log('e=', e)
  pagination.value.current = e.current
  pagination.value.pageSize = e.pageSize
  searchParams.value.currentPage = pagination.value.current as number

  getList()
}

const getList = async () => {
  loading.value = true
  try {
    let {
      state,
      data,
      message: msg,
    } = await workPlaceWeChatApi.getPublicWechatUserRelevancyList(searchParams.value)
    if (state === 200) {
      dataSource.value = data.list
      pagination.value.total = Number(data.totalCount)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
  loading.value = false
}

const jieBang = async (id: any) => {
  try {
    let { state, data, message: msg } = await workPlaceWeChatApi.deleteQuotationRule({ id })
    if (state === 200) {
      message.success('解绑成功')
      getList()
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 二维码的链接
let qrcode = ref('')
const refresh = async () => {
  try {
    let { state, data, message: msg } = await workPlaceWeChatApi.getQRCodeUrl()
    if (state === 200) {
      qrcode.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('二维码获取失败，请刷新后重试~')
  }

  getList()
}
</script>

<template>
  <div>
    <a-modal v-model:open="open" title="云感知服务" @ok="handleOk" :width="800" :footer="false">
      <div class="main-container">
        <div class="qrcode-container">
          <a-avatar shape="square" :size="100" :src="qrcode">请获取</a-avatar>
        </div>

        <div class="desc-container">
          <div class="title">微信扫码关注公众号</div>
          <div class="desc">
            用于实时感知软件运行异常、状态异常、余额不足预警、出票信息、识别失败提示等关键信息
          </div>
          <div class="footer">
            <div>
              <a-button type="primary" ghost size="small" @click="refresh">刷新二维码</a-button>
            </div>
          </div>
        </div>
      </div>

      <div style="height: 330px; overflow-y: hidden">
        <a-table
          style="height: 290px"
          :scroll="{ y: 250 }"
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="changePage"
          rowKey="id"
          size="small"
          :loading="loading"
        >
          <template #emptyText>
            <a-empty description="暂无数据" />
          </template>

          <template #headerCell="{ column }"></template>

          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'nickName'">
              <span v-if="record.nickName == ''">微信用户</span>
              <a-tooltip placement="topLeft" v-else>
                <template #title>
                  {{ record.nickName || '-' }}
                </template>
                <span class="hiddenText">{{ record.nickName || '-' }}</span>
              </a-tooltip>
            </template>

            <template v-else-if="column.key === 'avatar'">
              <div class="imgBox">
                <img v-if="record.avatar != ''" :src="record.avatar" alt="" />
                <img v-else :src="weChatUserImg" alt="" />
              </div>
            </template>

            <template v-else-if="column.key === 'relevancyTime'">
              {{ timeFormat_2(record.relevancyTime) }}
            </template>

            <template v-else-if="column.key === 'action'">
              <a-popconfirm
                title="确定解绑？"
                ok-text="是"
                cancel-text="否"
                @confirm="jieBang(record.id)"
              >
                <a>解绑</a>
              </a-popconfirm>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
.hiddenText {
  display: inline-block;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 16px;
}

.imgBox {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;

  img {
    height: 50px;
  }
}

.main-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;

  .qrcode-container {
    width: 100px;
  }
  .desc-container {
    flex: 1;
    margin-left: 10px;
    .title {
      font-weight: 600;
      font-size: 16px;
    }
    .desc {
      font-size: 14px;
    }
    .footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 8px;
    }
  }
}
</style>
